<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table {
				margin: 50px auto;
				width: 300px;
			}
			th {
				height: 40px;
				background: deepskyblue;
				color: white;
				border: 1px solid darkgray;
			}
			td {
				padding-left: 10px;
				height: 40px;
				background: lightgray;
				color: white;
				border: 1px solid darkgray;
			}
		</style>
	</head>
	<body>
		<table cellspacing="0">
			<tr>
				<th><input type="checkbox" id="all"></th>
				<th>菜名</th>
				<th>饭店</th>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>地三鲜</td>
				<td>田老师</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>西红柿鸡蛋</td>
				<td>田老师</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>地三鲜</td>
				<td>田老师</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>地三鲜</td>
				<td>田老师</td>
			</tr>
		</table>
		<script>
			var all=document.getElementById("all");
			var inputs=document.getElementsByTagName("input");
			var i;
			all.onclick=function(){
				for(i=1;i<inputs.length;i++)
				{
					inputs[i].checked=this.checked;
				}
			}
			for(i=1;i<inputs.length;i++){
                inputs[i].onclick = function () {
                    var isChecked = true;
                    for(var j=1;j<inputs.length;j++){
                        if(inputs[j].checked === false){
                            isChecked = false;
                        }
                    }
                    all.checked = isChecked;
                }
            }

		</script>
	</body>
</html>
